<template>
  <div class="login">
    <div class="title">登录</div>
    <mt-field label='用户名称' placeholder="手机号/用户名" type="email" v-model="email"></mt-field>
    <mt-field class="password" label='密码' placeholder="请输入登录密码" type="password" v-model="password"></mt-field>
    <mt-button type="primary" class="logBtn" size='large' @click="login()">登录</mt-button>
    <router-link to="/register" tag="p" class='register'> 快速注册</router-link>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import base from '@/util/base.js'
export default {
  name: 'login',
  data () {
    return {
      msg: '',
      email: null,
      password: null
    }
  },
  methods: {
    async login () {
      if (!this.email) {
        Toast('请输入手机号')
        return
      }
      if (!this.password) {
        Toast('请输入密码')
        return
      }
      let that = this
      try {
        let res = await that.$api({
          method: 'post',
          url: '/app/user/login',
          params: {
            phone: that.email,
            password: that.password
          }
        })
        if (res.success === true) {
          base.setSession('kay', that.email)
          localStorage.setItem('phone', that.email)
          base.setSession('value', res.data || '')
          this.$router.push('/user')
        } else {
          base.toast(res.msg)
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
.login{
  font-family: PingFangSC-regular;
  padding: .3rem .3rem;
  background: #fff;
  height: 100vh;
  .title{
    font-size: .3rem;
    margin-bottom: .3rem;
    text-align: center;
  }
  .password{
    margin-top: .2rem
  }
  /deep/.mint-cell-wrapper{
    background-image: none
  }
  /deep/.mint-cell{
    background: #f2f2f2;
  }
  /deep/.mint-field-core{
    background: #f2f2f2;
  }
}
.logBtn{
  margin-top: .4rem
}
.register{
  font-size: .14rem;
  margin-top: .2rem;
  text-align: center;
}
</style>
